---
type: tutorial
title: 개발 환경 준비하기
description: '튜토리얼: 처음 만드는 Astro 블로그 — 튜토리얼을 완료하는 데 필요한 로컬 도구 설치'
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

<PreCheck>
  - Astro 웹사이트를 빌드하는 데 사용할 도구 설치하기
</PreCheck>

## 필요한 개발 도구

### 터미널

Astro 프로젝트를 만들고, 사이트를 빌드, 개발, 테스트하는 주요 명령을 실행하기 위해 **명령줄 (터미널)을** 사용하게 됩니다.

운영 체제의 로컬 터미널 프로그램을 통해 명령줄에 액세스할 수 있습니다. 일반적인 애플리케이션으로는 **Terminal** (MacOS/Linux), **명령 프롬프트** (Windows), **Termux** (Android) 등이 있습니다. 이 중 하나가 이미 기기에 설치되어 있을 것입니다.

### Node.js

Astro를 실행하려면, 호환되는 버전의 [**Node.js**](https://nodejs.org/ko/)가 설치되어 있어야 합니다. Astro는 **짝수 버전**의 Node.js만 지원합니다. 현재 지원되는 최소 버전은 각각 `v18.20.8`, `v20.3.0`, `v22.0.0`입니다. (`v19`와 `v21`은 지원되지 않습니다.)

호환되는 버전이 설치되어 있는지 확인하려면 터미널에서 다음 명령을 실행하세요.

```sh
node -v

// 예시 출력
v18.20.8
```

명령 실행의 결과로 Astro를 지원하는 버전 번호가 반환되면, 계속 진행할 수 있습니다!

만약 `Command 'node' not found`와 같은 오류 메시지가 반환되거나 필요한 버전보다 낮은 버전 번호가 반환된다면, [호환되는 Node.js 버전을 설치](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)해야 합니다.

### 코드 편집기

또한 코드를 작성하기 위해 **코드 편집기**를 다운로드하여 설치해야 합니다.

:::tip[사용하는 편집기]
이 튜토리얼에서는 **VS Code**를 사용하지만, 운영 체제에 맞는 모든 편집기를 사용할 수 있습니다.
:::

<Steps>
1. [VS Code](https://code.visualstudio.com/#alt-downloads) 또는 원하는 다른 코드 편집기를 다운로드하여 설치하세요.
</Steps>

<Box icon="question-mark">
### 지식 테스트

다음 중 어느 것이...
1. 파일과 콘텐츠를 변경하기 위한 코드 편집기인가요?

    <MultipleChoice>
      <Option>
        웹 브라우저
      </Option>
      <Option>
        터미널
      </Option>
      <Option isCorrect>
        VS Code
      </Option>
    </MultipleChoice>

2. 리포지토리를 위한 온라인 버전 제어 공급자인가요?

    <MultipleChoice>
      <Option isCorrect>
        GitHub
      </Option>
      <Option>
        터미널
      </Option>
      <Option>
        VS Code
      </Option>
    </MultipleChoice>

3. 명령을 실행하기 위한 애플리케이션인가요?

    <MultipleChoice>
      <Option>
        GitHub
      </Option>
      <Option isCorrect>
        터미널
      </Option>
      <Option>
        웹 브라우저
      </Option>
    </MultipleChoice>

</Box>

<Box icon="check-list">
## 다음 단계를 진행하기 위한 체크리스트

<Checklist>
- [ ] 터미널에서 명령줄에 액세스할 수 있습니다.
- [ ] Node.js를 설치했습니다.
- [ ] VS Code와 같은 코드 편집기를 설치했습니다.
</Checklist>
</Box>

### 리소스

- <p>[FreeCodeCamp.org](https://freecodecamp.org) <Badge class="neutral-badge" text="외부 링크" /> — HTML, CSS, JS 등을 포함한 다양한 주제의 전체 강좌 또는 빠른 복습 자료를 제공하는 무료 교육 사이트</p>
